<template>
  <a-card :bordered="false">
    <a-space :size="54">
      <a-upload
        :custom-request="customRequest"
        list-type="picture-card"
        :file-list="fileList"
        :show-upload-button="true"
        :show-file-list="false"
        @change="uploadChange"
      >
        <template #upload-button>
          <a-avatar :size="100" class="info-avatar">
            <template #trigger-icon>
              <icon-camera />
            </template>
            <img v-if="fileList.length" :src="fileList[0].url" />
          </a-avatar>
        </template>
      </a-upload>
      <a-descriptions
        :data="renderData"
        :column="2"
        align="right"
        layout="inline-horizontal"
        :label-style="{
          width: '140px',
          fontWeight: 'normal',
          color: 'rgb(var(--gray-8))'
        }"
        :value-style="{
          width: '200px',
          paddingLeft: '8px',
          textAlign: 'left'
        }"
      >
        <template #label="{ label }">{{ label }} :</template>
        <template #value="{ value, data }">
          <a-tag v-if="data.label === '实名认证'" color="green" size="small">
            已认证
          </a-tag>
          <span v-else>{{ value }}</span>
        </template>
      </a-descriptions>
    </a-space>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import type {
  FileItem,
  RequestOption
} from '@arco-design/web-vue/es/upload/interfaces';
import { useUserStore } from '@/store';
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
import { uploadUsingPost } from '@/service/backend/fileInfoController.ts';
import { updateMyUserUsingPost } from '@/service/backend/userController.ts';
import useUser from '@/hooks/useUser.ts';

const userStore = useUserStore();
const { logout } = useUser();
const loginUser = userStore.loginUser;
const file = {
  uid: '-2',
  name: 'avatar.png',
  url: loginUser.avatar
};
const renderData = [
  {
    label: '用户名',
    value: loginUser.username
  },
  {
    label: '账号ID',
    value: loginUser.account
  },
  {
    label: '注册时间',
    value: dayjs(loginUser.createTime).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    label: '角色',
    value: loginUser.role === 'admin' ? '管理员' : '普通用户'
  }
] as DescData[];
const fileList = ref<FileItem[]>([file]);
const uploadChange = (_fileItemList: FileItem[], fileItem: FileItem) => {
  fileList.value = [fileItem];
};
const customRequest = async (options: RequestOption) => {
  // docs: https://axios-http.com/docs/cancellation
  const controller = new AbortController();
  console.log('file', options.fileItem.file);
  const { onError, onSuccess, fileItem } = options;
  try {
    const { code, data } = await uploadUsingPost({ file: fileItem.file });
    if (code === 0 && data) {
      await updateMyUserUsingPost({ avatar: data });
      await logout;
    }
    onSuccess(res);
  } catch (error) {
    onError(error);
  }
  return {
    abort() {
      controller.abort();
    }
  };
};
</script>

<style scoped lang="less">
.arco-card {
  padding: 14px 0 4px 4px;
  border-radius: 4px;
}

:deep(.arco-avatar-trigger-icon-button) {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #e8f3ff;

  .arco-icon-camera {
    margin-top: 8px;
    font-size: 14px;
    color: rgb(var(--arcoblue-6));
  }
}
</style>
